<template>
	<a-form layout="inline" :form="form">
		<a-row :gutter="4">
			<a-col :md="labelType == 0 ? 8 : 12" :sm="24" :lg="modeType==1?(labelType == 0 ? 8 : 12):(labelType == 0 ? 6 : 8)" v-for="(item, index) in fieldList" :key="index">
				<a-form-item :label="labelType == 0 ? null : item.text" :labelCol="{ span: labelType == 0 ? 0 : 5 }" :wrapperCol="{ span: labelType == 0 ? 24 : 18 }">
					<a-input-number v-if="item.type == 'int' || item.type == 'number'" v-decorator="[item.value]" :min="1" class="w100" />
					<a-date-picker v-else-if="item.type == 'date'" :disabledDate="disabledDate" v-decorator="[item.value]" class="w100" />
					<a-month-picker v-else-if="item.type == 'month'" v-decorator="[item.value]" class="w100" />
					<a-range-picker v-else-if="item.type == 'rangeDate'" :disabledDate="disabledDate" v-decorator="[item.value]" class="w100" />
					<a-select :placeholder="`${item.text}`" v-else-if="item.type == 'select'" v-decorator="[item.value]" class="w100" showSearch :filter-option="filterOption">
						<a-select-option :value="sel.value" v-for="(sel, $subindex) in item.optionlist">{{ sel.text }}</a-select-option>
					</a-select>
					<a-tree-select
						class="w100"
						:tree-data="item.optionlist"
						allow-clear
						:searchPlaceholder="`${item.text}`"
						:placeholder="`${item.text}`"
						v-else-if="item.type == 'tree'"
						v-decorator="[item.value]"
						:replaceFields="item.replaceFields || null"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						treeNodeFilterProp="title"
						show-search
					/>
					<a-input allow-clear :placeholder="`${item.text}`" v-else v-decorator="[item.value]" autocomplete="off" class="w100" />
				</a-form-item>
			</a-col>
			<a-col :md="labelType == 0 ? 8 : 12" :sm="24" :lg="labelType == 0 ? 6 : 8">
				<a-button type="primary" @click="search" icon="search" class="search-btn" :class="{ 'lg-search-btn': labelType == 1 }"></a-button>
			</a-col>
		</a-row>
	</a-form>
</template>

<script>
import moment from 'moment';

export default {
	name: 'filterbar',
	props: {
		fieldList: Array,
		labelType: {
			type: [String, Number],
			default:0 //0 隐藏lable 1，显示lable
		},
		modeType: {
			type: [String, Number],
			default:0 //0 正常宽度，1小尺寸宽度
		}
	},
	data() {
		return {
			form: this.$form.createForm(this),
			filter: {},
			advanced: true
		};
	},
	created() {
		/* vue 实例创建成功 */
		this.$nextTick(() => {
			this.getDefaultValue();
		});
	},
	watch: {
		fieldList: {
			handler(newName, oldName) {
				this.getDefaultValue();
			},
			deep: true
			// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
			//immediate: true
		}
	},
	methods: {
		/*限制超过当前时间不可选*/
		disabledDate(current) {
			return current && current > moment().endOf('day');
		},
		search() {
			var keys = Object.keys(this.filter);
			var filterparam = this.form.getFieldsValue(keys);
			for (var key in filterparam) {
				console.log(typeof filterparam[key]);
				if (typeof filterparam[key] == 'string') {
					filterparam[key] = filterparam[key].trim();
				}
				if (typeof filterparam[key] == 'number' && filterparam[key] == -1) {
					filterparam[key] = null;
				}
			}
			// this.advanced=false;
			this.$emit('handlerSearch', Object.assign({}, this.filter, filterparam));
		},
		reset() {
			this.getDefaultValue();
			var keys = Object.keys(this.filter);
			var filterparam = this.form.getFieldsValue(keys);
			for (var key in filterparam) {
				console.log(typeof filterparam[key]);
				if (typeof filterparam[key] == 'string') {
					filterparam[key] = filterparam[key].trim();
				}
				if (typeof filterparam[key] == 'number' && filterparam[key] == -1) {
					filterparam[key] = null;
				}
			}
			// this.advanced=false;
			this.$emit('handlerReset', Object.assign({}, this.filter, filterparam));
		},
		toggleAdvanced() {
			this.advanced = !this.advanced;
		},
		getDefaultValue() {
			this.filter = {};
			if (this.fieldList && this.fieldList.length > 0) {
				this.fieldList.forEach(item => {
					this.filter[item.value] = item.defaultValue;
				});
			}
			this.form.setFieldsValue({
				...this.filter
			});
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.ant-input-number,
.ant-form-inline .ant-form-item {
	width: 100%;
}

.w100 {
	width: 100%;
}
.search-btn {
	border-radius: 0 4px 4px 0;
	width: 42px;
	margin-top: 4px;
	margin-left: -5px;
	@media (max-width: 479px) {
		border-radius: 4px;
		width: 100%;
		margin-left: 0;
	}
	&.lg-search-btn {
		width: 80px;
		border-radius: 4px;
		margin-left: 0;
	}
}
</style>
